<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>List of people in </title>

    <!-- Le styles -->
    <link href="http://lensandphoto.com/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }
    </style>
    <link href="http://lensandphoto.com/css/bootstrap.cs" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="/Users/BaN/Desktop/Manager/templates/assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/Users/BaN/Desktop/Manager/templates/assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/Users/BaN/Desktop/Manager/templates/assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/Users/BaN/Desktop/Manager/templates/assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="/Users/BaN/Desktop/Manager/templates/assets/ico/apple-touch-icon-57-precomposed.png">
</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Management System</a>
            <div class="nav-collapse collapse">
                <p class="navbar-text pull-right">
                    Logged in as <a href="#" class="navbar-link">Username</a>
                </p>
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">Companies</a></li>
                    <li><a href="#contact">Employees</a></li>
                    <li><a href="#contact">Cars</a></li>
                    <li><a href="#contact">Documents</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <div class="well sidebar-nav">
                <ul class="nav nav-list">
                    <li class="nav-header">Employes</li>
                    <li><a href="#">List</a></li>
                    <li><a href="#">Add</a></li>
                    <li class="nav-header">Documents</li>
                    <li><a href="#">List</a></li>
                    <li><a href="#">View</a></li>
                    <li class="nav-header">Cars</li>
                    <li><a href="#">List</a></li>
                    <li><a href="#">Add</a></li>
                </ul>
            </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">


            <div class="media">
                <div class="media-body">
                    <h4 class="media-heading">Details {{ car }}</h4>
                    ...

                    <!-- Nested media object -->
                    <div class="media">
                        <table class="table table-hover table-condensed table-striped">
                            <tr>
                                <th> First Name </th>
                                <th> Father's Name</th>
                                <th> Middle Name </th>
                                <th> Last Name </th>
                            </tr>
                            <tr>
                                <td>{{ person.firstName }}</td>
                                <td>{{ person.middleName }}</td>
                                <td>{{ person.thirdName }}</td>
                                <td>{{ person.lastName }}</td>
                            </tr>
                            <tr>
                                <th> Last Name </th>
                                <th> Middle Name</th>
                                <th> Father's Name </th>
                                <th> First Name </th>
                            </tr>
                            <tr>
                                <td>{{ person.aLastName }}</td>
                                <td>{{ person.aMiddleName }}</td>
                                <td>{{ person.aThirdName }}</td>
                                <td>{{ person.aFirstName }}</td>
                            </tr>
                            <tr>
                                <th> ID No. </th>
                                <th> Marital Status</th>
                                <th> Birth Place </th>
                                <th> Birth Date </th>
                                <th> Age </th>
                            </tr>
                            <tr>
                                <td>{{ person.id_no }}</td>
                                <td>{{ person.maritalStatus }}</td>
                                <td>{{ person.birthPlace }}</td>
                                <td>{{ person.birthDate }}</td>
                                <td>{{ person.calculate_age }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>


            <a class="btn" href="../edit">EDIT</a>

            <footer>
                <p>&copy; Bander 2012</p>
            </footer>

        </div><!--/.fluid-container-->
    </div>
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

</body>
</html>